<template>
	<view class="content" :class="showcondition?'noscroll':''">
		<headerNav title="直营链"></headerNav>
		<view class="main-box">
			<view class="box flex">
				<!-- <input type="text" class="ipt left-ipt" placeholder="开始时间" v-model="startDate" :disabled="true" @click="selDate(1)">
				<view class="line">—</view>
				<input type="text" class="ipt right-ipt" placeholder="结束时间" v-model="endDate" :disabled="true" @click="selDate(2)"> -->
				<picker mode="date" :value="startDate" start="2024-01" end="2099-12" @change="changeMonth" fields="month">
					<input class="date-ipt" :value="startDate" :disabled="true" placeholder="选择月份">
				</picker>
				<view class="icon-btn">
					<uni-icons type="calendar" size="52rpx" :color="baseColor"></uni-icons>
				</view>
			</view>
			<view class="box flex search-box" v-if="type_val==2 || type_val==3">
				<uni-icons type="search" size="52rpx" color="#8695AA"></uni-icons>
				<input class="search-ipt" type="text" :disabled="true" v-model="condition" placeholder="查询"  @click="showcondition=!showcondition">
				<view class="search-main" v-show="showcondition">
					<!-- <view class="con-item">
						<view class="con-title">板块</view>
						<view class="con-select">
							<uni-data-select v-model="plate" :localdata="plateData" placeholder="请选择" :clear="false" @change="selStore()"></uni-data-select>
						</view>
					</view> -->
					<view class="con-item">
						<view class="con-title">省</view>
						<view class="con-select">
							<uni-data-select v-model="province" :localdata="provinceData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">市</view>
						<view class="con-select">
							<uni-data-select v-model="city" :localdata="cityData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">区</view>
						<view class="con-select">
							<uni-data-select v-model="area" :localdata="areaData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="con-item">
						<view class="con-title">门店</view>
						<view class="con-select">
							<uni-data-select v-model="store" :localdata="storeData" placeholder="请选择" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="btn" @click="search()">确认</view>
				</view>
			</view>
			<view class="box chart-box">
				<view class="box-title">总销售量</view>
				<view class="chart-main">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData"></qiun-data-charts>
				</view>
			</view>
			<template v-if="hasNew">
				<view class="box chart-box">
					<view class="box-title">新门店数量</view>
					<view class="chart-main">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2"></qiun-data-charts>
						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3"></qiun-data-charts>
						<view class="arcbar-tip">
							<view class="tip-item flex flex-center">
								<view class="tip-circle" :style="{'backgroundColor':opts3.color[0]}"></view>
								<view class="tip-title">往期产品销量:{{oldSale}}</view>
							</view>
							<view class="tip-item flex flex-center">
								<view class="tip-circle" :style="{'backgroundColor':opts3.color[1]}"></view>
								<view class="tip-title">新增产品销量:{{newSale}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="grid-title">新增参数</view>
				<view class="grid-box">
					<view class="grid-item">
						<view class="grid-title">新增实付总额</view>
						<view class="grid-value">{{pay_data.payment}}</view>
						<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.payment_rate}}</view></view>
					</view>
					<view class="grid-item">
						<view class="grid-title">新增实际成本总额</view>
						<view class="grid-value">{{pay_data.cost}}</view>
						<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.cost_rate}}</view></view>
					</view>
					<view class="grid-item">
						<view class="grid-title">新增提成总额</view>
						<view class="grid-value">{{pay_data.commission}}</view>
						<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.commission_rate}}</view></view>
					</view>
					<view class="grid-item">
						<view class="grid-title">新增实际营收总额</view>
						<view class="grid-value">{{pay_data.gain}}</view>
						<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.gain_rate}}</view></view>
					</view>
				</view>
				<view class="grid-title">往期参数</view>
				<view class="grid-box">
					<view class="grid-item">
						<view class="grid-title">往期实付总额</view>
						<view class="grid-value">{{old_data.payment}}</view>
					</view>
					<view class="grid-item">
						<view class="grid-title">往期实际成本总额</view>
						<view class="grid-value">{{old_data.cost}}</view>
					</view>
					<view class="grid-item">
						<view class="grid-title">往期提成总额</view>
						<view class="grid-value">{{old_data.commission}}</view>
					</view>
					<view class="grid-item">
						<view class="grid-title">往期实际营收总额</view>
						<view class="grid-value">{{old_data.gain}}</view>
					</view>
				</view>
			</template>
			<view class="grid-box" v-else>
				<view class="grid-item">
					<view class="grid-title">实付总额</view>
					<view class="grid-value">{{pay_data.payment}}</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.payment_rate}}</view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">实际成本总额</view>
					<view class="grid-value">{{pay_data.cost}}</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.cost_rate}}</view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">提成总额</view>
					<view class="grid-value">{{pay_data.commission}}</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.commission_rate}}</view></view>
				</view>
				<view class="grid-item">
					<view class="grid-title">实际营收总额</view>
					<view class="grid-value">{{pay_data.gain}}</view>
					<view class="grid-up flex flex-center">较上月 <view class="up-value flex">{{pay_data.gain_rate}}</view></view>
				</view>
			</view>
			<view class="box chart-box">
				<view class="box-title">转换率</view>
				<view class="chart-main">
					<qiun-data-charts type="ring" :opts="opts4" :chartData="chartData4"></qiun-data-charts>
				</view>
			</view>
		</view>
		<!-- <uni-calendar :lunar="false" ref="calendarRef" :insert="false" @confirm="getdate"></uni-calendar> -->
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref,watch } from 'vue';
	import {getProvince,getCity,getArea, profile, getData, getStore} from "@/api/public"
	import {onLoad,onShow} from "@dcloudio/uni-app"
import { tip,goto } from '../../utils/utils';
	const startDate = ref("")
	const endDate = ref("")
	let dateType = 1
	const calendarRef = ref()
	const showcondition = ref(false)
	const plate = ref(0)
	const plateData = ref([
		{text:'供应链',value:2},
		{text:'直营',value:1}
	])
	type dataCom = {
		text:string,
		value:number
	}
	const province = ref(0)
	const provinceData = ref<dataCom[]>([])
	const city = ref(0)
	const cityData = ref<dataCom[]>([])
	const area = ref(0)
	const areaData = ref<dataCom[]>([])
	const store = ref(0)
	const storeData = ref<dataCom[]>([])
	const pay_data = ref({
		payment:0,
		payment_rate:"0%",
		cost:0,
		cost_rate:"0%",
		commission:0,
		commission_rate:"0%",
		gain:0,
		gain_rate:"0%"
	})
	const old_data = ref({
		payment:0,
		cost:0,
		commission:0,
		gain:0,
	})
	watch(province,(newval:number)=>{
		city.value = 0
		area.value = 0
		store.value = 0
		if(newval>0){
			getCity({province_id:newval}).then((res:any)=>{
				cityData.value = res.data.map((item:any)=>{
					return {
						text:item.city_name,
						value:item.city_id
					}
				})
			})
		}
		selStore()
	})
	watch(city,(newval:number)=>{
		area.value = 0
		store.value = 0
		if(newval>0){
			getArea({city_id:newval}).then((res:any)=>{
				areaData.value = res.data.map((item:any)=>{
					return {
						text:item.area_name,
						value:item.area_id
					}
				})
			})
		}
		selStore()
	})
	watch(area,(newval:number)=>{
		store.value = 0
		if(newval>0){
			console.log('获取地区门店')
		}
		selStore()
	})
	const condition = computed(()=>{
		let platev = dataTxt(plate.value,plateData.value)
		let provincev = dataTxt(province.value,provinceData.value)
		let cityv = dataTxt(city.value,cityData.value)
		let areav = dataTxt(area.value,areaData.value)
		let storev = dataTxt(store.value,storeData.value)
		console.log(areav)
		return (platev?platev+'-':"")+
				(provincev?provincev+'-':"")+
					(cityv?cityv+'-':"")+
						(areav?areav+'-':"")+
							(storev?storev:"")
	})
	const changeMonth = (e:any)=>{
		startDate.value = e.detail.value
		get_data()
	}
	const selDate = (e:number)=>{
		dateType = e
		setTimeout(()=>{
			calendarRef.value.open()
		},300)
	}
	const getdate = (e:any)=>{
		if(dateType==1){
			startDate.value = e.fulldate
		}
		else{
			endDate.value = e.fulldate
		}
	}
	const dataTxt = (val:number,dataArr:dataCom[])=>{
		let res = dataArr.filter((item:any)=>{return item.value==val})
		return res[0]?res[0].text:""
	}
	const chartData = ref({})	//图表数据
	const opts = ref({
		//color:["#8D4EDA","#00B2FF","#165DFF"],
		title: {
			name: "",
			fontSize: 24,
			color: "#1D2129"
		},
		subtitle: {
			name: "",
			fontSize: 14,
			color: "#F53F3F"
		},
		dataLabel:false,
		legend:{
			position:"bottom"
		},
	})
	const chartData2 = ref({})	//图表数据
	const opts2 = ref({
		color:["#8D4EDA","#00B2FF","#165DFF"],
		title: {
			name: "",
			fontSize: 24,
			color: "#1D2129"
		},
		subtitle: {
			name: "",
			fontSize: 14,
			color: "#F53F3F"
		},
		dataLabel:false,
		legend:{
			position:"bottom"
		},
	})
	const chartData3 = ref({})	//图表数据
	const opts3 = ref({
		color:["#165DFF","#00B2FF"],
		title: {
			name: "",
		},
		subtitle: {
			name: "",
		},
		dataLabel:false,
		legend:{
			position:"bottom",
			show:true
		},
	})
	const oldSale = ref(0)
	const newSale = ref(0)
	const chartData4 = ref({})	//图表数据
	const opts4 = ref({
		color:["#8D4EDA","#165DFF"],
		title: {
			name: "",
			fontSize: 24,
			color: "#1D2129"
		},
		subtitle: {
			name: "",
			fontSize: 14,
			color: "#F53F3F"
		},
		dataLabel:false,
		legend:{
			position:"bottom"
		},
	})
	const type_val = ref(0)
	const token = ref("")
	const hasNew = computed(()=>{
		return type_val.value==2 && store.value==0 && startDate.value!=""
	})
	onShow(()=>{
		//登录检测
		token.value = uni.getStorageSync('token')
		if(!token.value){
			return tip('请先登录',()=>{
				goto('index/login')
			})
		}
		let user = uni.getStorageSync('user')
		if(user.type==99){		//超级管理员
			//获取所有门店
			/*getStore().then((res:any)=>{
				storeData.value = res.data.map((item:any)=>{
					return {
						text:item.name,
						value:item.id,
					}
				})
			})*/
			type_val.value = 2
		}
		get_data()
	})
	/*watch(token,(newval:string)=>{
		console.log(newval)
		if(newval!=''){
			profile().then((res:any)=>{
			    if(res.error==0){
					get_data()
			    }
				else{
					return tip('请先登录',()=>{
			            goto('index/login')
			        })
				}
			})
		}
	},{immediate:true})*/
	onLoad(()=>{
		getProvince().then((res:any)=>{
			provinceData.value = res.data.map((item:any)=>{
				return {
					text:item.province_name,
					value:item.province_id
				}
			})
		})
	})
	const search = ()=>{
		console.log('搜索')
		showcondition.value = false
		get_data()
	}
	const get_data = ()=>{
		getData({
			plate:1,
			province:province.value,
		    city:city.value,
			district:area.value,
		    start_date:startDate.value,
		    //end_date:endDate.value
			admin_id:store.value,
		}).then((rs:any)=>{
			if(rs.error==1){
				return tip(rs.msg)
			}
			//图一
			//图表数据
			let data = rs.data
			let series = {
				series: [
					{
						data: data.data1
					}
				]
			}
			chartData.value = JSON.parse(JSON.stringify(series))
			opts.value.title.name = data.total
			opts.value.subtitle.name = "较上月 "+data.total_rate
			pay_data.value = data.pay_data
			old_data.value = data.old_data
            //图表数据2
			//图表数据2
			let res2 = {
				series: [
					{
						data: data.data2
					}
				]
			}
			chartData2.value = JSON.parse(JSON.stringify(res2))
			opts2.value.title.name = (data.data2.reduce((sum:number,current:number)=>sum+current.value,0)).toString()
			
			//图表数据2
			let res3 = {
				series:data.data3
			}
			chartData3.value = JSON.parse(JSON.stringify(res3))
			oldSale.value = data.oldTotal
			newSale.value = data.total
			//图表数据4
			let res4 = {
				series: [
					{
						data: data.data4
					}
				]
			}
			chartData4.value = JSON.parse(JSON.stringify(res4))
			opts4.value.title.name = data.order_rate
			opts4.value.subtitle.name = "较上月 "+data.order_up
		})
	}
	const selStore = ()=>{
		store.value = 0
		getStore({
            plate:plate.value,
            province:province.value,
            city:city.value,
            district:area.value,
		}).then((res:any)=>{
			if(res.data.length>0){
				storeData.value = res.data.map((item:any)=>{
				    return {
				        text:item.name,
				        value:item.person_u_id
				    }
				})
			}
			else{
				storeData.value = []
			}
		})
	}
</script>

<style lang="scss">
	.content{
		padding:0 26rpx 40rpx;
		.main-box{
			margin-top: 20rpx;
			.box{
				padding: 14rpx 24rpx;
				border-radius: 4rpx;
				background-color: #F0F9FF;
				margin-bottom:16rpx;
				.ipt{
					height:44rpx;
					width:280rpx;
					font-size:28rpx;
					text-align:center;
					line-height:44rpx;
				}
				.date-ipt{
					height:44rpx;
					width:580rpx;
					font-size:28rpx;
					text-align:center;
					line-height:44rpx;
				}
				.line{
					color:#86909C;
					width:20rpx;
					line-height:44rpx;
				}
				.search-ipt{
					padding-left:4rpx;
					width:100%;
					height:44rpx;
					font-size:28rpx;
					line-height:44rpx;
				}
				.box-title{
					height: 46rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #1D252F;
					line-height: 48rpx;
				}
			}
			.chart-box{
				padding:32rpx 40rpx;
				.arcbar-tip{
					margin-top:20rpx;
					.tip-item{
						font-size:28rpx;
						margin-bottom: 20rpx;
						.tip-circle{
							width:24rpx;
							height:24rpx;
							border-radius:12rpx;
							margin-right:20rpx;
						}
						.tip-title{
							color:#4E5969;
						}
					}
				}
			}
			.search-box{
				position:relative;
				.search-main{
					position:absolute;
					left:0;
					top:72rpx;
					background:#fff;
					width:700rpx;
					height:calc(100vh - 450rpx);
					overflow-y:scroll;
					padding:22rpx 0;
					z-index:999;
					.con-item{
						margin-bottom:60rpx;
						.con-title{
							font-size:28rpx;
						}
						.con-select{
							margin-top:16rpx;
							width: 702rpx;
							height: 64rpx;
							background: #F2F3F5;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}
				}
			}
			.grid-box{
				margin-top:40rpx;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr 1fr;
				grid-gap: 40rpx;
				margin-bottom:40rpx;
				.grid-item{
					background-image: linear-gradient(to bottom,#F2F2FE,#E6F0FE);
					border-radius:8rpx;
					text-align:center;
					padding:32rpx;
					.grid-title{
						font-size:32rpx;
						color:#1D252F;
					}
					.grid-value{
						font-size:48rpx;
						margin-top:48rpx;
						color:#1D252F;
						font-weight:800;
					}
					.grid-up{
						font-size:24rpx;
						color:#4E5969;
						.up-value{
							color:#F53F3F;
							.up-icon{
								width: 24rpx;
								height:24rpx;
								margin-left:8rpx;
							}
						}
					}
				}
				.grid-item:last-child{
					background-image: linear-gradient(to bottom,#F2FEFB,#E6FEF7);
				}
			}
		}
	}
	.noscroll{
		height:100vh;
		overflow: hidden;
	}
</style>
·